<script setup lang="ts">
import { useUploadApiStore } from '@/stores';
import { storeToRefs } from 'pinia';
const { apiInfoForm } = storeToRefs(useUploadApiStore())
const { onSubmit, resetForm } = useUploadApiStore()

</script>

<template>
    <div style="height: 80px;display: flex;justify-content: center; background-color: skyblue; margin-bottom: 30px;">
        <div style="margin-top: 20px;">用户上传接口，通过表单进行上传</div>
    </div>
    <div class="apiInfo-form">
        <el-form :model="apiInfoForm" label-width="auto" style="max-width: 700px">

            <el-form-item label="Api接口名称">
                <el-input v-model="apiInfoForm.name" />
            </el-form-item>
            <el-form-item label="Api接口URL">
                <el-input v-model="apiInfoForm.url">
                    <template #prepend>Http://</template>
                </el-input>
            </el-form-item>
            <el-form-item label="Api接口描述">
                <el-input v-model="apiInfoForm.description" />
            </el-form-item>
            <el-form-item label="Api接口类型" prop="region">
                <el-select v-model="apiInfoForm.method" placeholder="api接口类型">
                    <el-option label="GET" value="GET" />
                    <el-option label="POST" value="POST" />
                    <el-option label="PUT" value="PUT" />
                    <el-option label="DELETE" value="DELETE" />
                    <el-option label="PATCH" value="PATCH" />
                </el-select>
            </el-form-item>
            <el-form-item label="Api接口请求头">
                <el-input v-model="apiInfoForm.requestHeader" type="textarea" />
            </el-form-item>
            <el-form-item label="Api接口创建日期">
                <el-col :span="26">
                    <el-date-picker v-model="apiInfoForm.createTime" format="YYYY-MM-DD HH:MM:ss" value-format="YYYY-MM-DD HH:MM:ss" 
                        type="date" placeholder="选择日期" style="width: 100%" clearable="" />
                </el-col>
            </el-form-item>
            <el-form-item label="接口状态">
                <el-switch v-model="apiInfoForm.status" inline-prompt active-text="可用" inactive-text="禁用" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit()">Upload</el-button>
                <el-button @click="resetForm()"> Reset</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
.apiInfo-form {
    display: flex;
    justify-content: center;
}

.el-form .el-form-item:last-child :deep(div) {
    display: flex;
    justify-content: center;
}
</style>